<template>
	<view class="warp">
		<view class="c_title">
			<view class="c_t_left">
				<span @click="chnagetab(0)" :class="tabnum==0?'active':'c_active'"  >新客户</span>
				<span class="active">/</span>
				<span @click="chnagetab(1)" :class="tabnum==1?'active':'c_active'"  >已成交</span>
			</view>
			<view class="c_t_right" style="display: flex; background-color: #f5f5f5;height: 50rpx;line-height: 40rpx;padding: 5rpx 10rpx;border: 2rpx solid #cecece;border-radius: 25rpx;">
				<input @blur="search" v-model="queryform.phoneNum" type="text" style="background-color: #f5f5f5;width: 350rpx;height: 40rpx;"></input>
				<uni-icons @click="search" type="search" size="46rpx"></uni-icons>
			</view>
		</view>
		<view class="statistics"  style="overflow: auto;  display: -webkit-flex;  display: flex; width: 750rpx;">
			<view class="" style="width: 150rpx;">
				<view class="item_t" @click="getlisted(0)">
					<view :class="numindex==0?'item_top':''">
						{{allnum.customerNum}}
					</view>
					<view class="item_bottom">
						总客户
					</view>
				</view>
			</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t" @click="getlisted(1)">
						<view :class="numindex==1?'item_top':''">
							{{allnum.followNum}}
						</view>
						<view class="item_bottom">
							跟进中
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t" @click="getlisted(2)">
						<view :class="numindex==2?'item_top':''">
							{{allnum.noFollowNum}}
						</view>
						<view class="item_bottom">
							未跟进
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t">
						<view :class="numindex==3?'item_top':''" @click="getlisted(3)">
							{{allnum.phoneCount}}
						</view>
						<view class="item_bottom">
							有号码
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t"@click="getlisted(4)">
						<view :class="numindex==4?'item_top':''">
							{{allnum.intentionNum}}
						</view>
						<view class="item_bottom">
							高意向
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t"@click="getlisted(5)">
						<view :class="numindex==5?'item_top':''">
							{{allnum.middleIntentionNum}}
						</view>
						<view class="item_bottom">
							中意向
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t"@click="getlisted(6)">
						<view :class="numindex==6?'item_top':''">
							{{allnum.lowIntentionNum}}
						</view>
						<view class="item_bottom">
							低意向
						</view>
					</view>
				</view>
				<view class="" style="width: 150rpx;">
					<view class="item_t"@click="getlisted(7)">
						<view :class="numindex==7?'item_top':''">
							{{allnum.noneIntentionNum}}
						</view>
						<view class="item_bottom">
							无意向
						</view>
					</view>
				</view>
		</view>
	<!-- 	<view class="tabs">
			<view class="tab_item">
				<view class="name">
					创建时间
				</view>
				<view class="sanjiao">
				<view class="top"></view>
				<view class="bottom"></view>
				</view>
			</view>
			<view class="tab_item">
				<view class="name">
					跟进状态
				</view>
				<view class="sanjiao">
				<view class="top"></view>
				<view class="bottom"></view>
				</view>
			</view>
			<view class="tab_item">
				<view class="name">
					访问时间
				</view>
				<view class="sanjiao">
				<view class="top"></view>
				<view class="bottom"></view>
				</view>
			</view>
			<view class="tab_item">
				<view class="name">
					筛选
				</view>
				<view class="sanjiao">
				<view class="top"></view>
				<view class="bottom"></view>
				</view>
			</view>
		</view> -->
		<view class="customer_list">
			<view class="customer_item" v-for="(item,index) in list" :key="index">
				<view class="item_top">
					<view class="i_left">
						<image  style="width: 36rpx; height: 36rpx; border-radius: 50%;" :src="userCenterData.memberAvatar"></image>
					     <view class="i_text">
					     	
							<span style="color: #ee212d;margin-left: 6rpx;">{{userCenterData.memberName}}</span>
							
					     </view>
					</view>
				<!-- 	<view class="i_right">
						<span>所属</span>
						<span>{{userCenterData.memberName}}</span>
						<span>销售员</span>
						<uni-icons type="right" color="#656565" size="30rpx"></uni-icons>
					</view> -->
				</view>
				<view class="item_card">
					<view class="c_top">
						<image style="width: 36rpx; height: 36rpx; border-radius: 50%;" :src="item.avatar"></image>
					 <view class="c_t_right">
						<view class="top">
							<view class="top_left" @click="tocustomerinfo(item)">
								<view class="name">
									{{item.customerName}}
								</view>
								<view class="status" v-if="item.followList.length!=0">
									跟进中
								</view>
								<view class="statusover" v-else>
									未跟进
								</view>
							</view>
							
							<view class="top_right" @click="addcustomer(item)">
								添加跟进
							</view>
						</view>
						<view class="source"  @click="tocustomerinfo(item)">
							<span>来源:</span>
							<span style="margin-left: 20rpx;">小程序</span>
						</view>
						<view class="adress"  @click="tocustomerinfo(item)">
							定位:<span style="margin-left: 20rpx;">{{item.phoneAddress}}</span>
						</view>
						<view class="num"  @click="tocustomerinfo(item)">
							<!-- <span>成交额</span>
							<span>20000</span>
							<span>|</span>
							<span>订单</span>
							<span>10</span> -->
							电话: <span @click="phonefn(item)" style="margin-left: 20rpx;color: burlywood;">{{item.phoneNum}}</span>
							
						</view>
					</view>
					</view>
					<!-- <view class="c_bottom">
						<view class="b_left">
							浏览商品
							<span style="margin-left: 10rpx;">5</span>
						</view>
						<view class="b_right">
							浏览视频
							<span style="margin-left: 10rpx;">3</span>
						</view>
					</view> -->
				</view>
				<view class="item_records"  @click="tocustomerinfo(item)">
					<view class="record_list">
						<view class="list_item" v-for="(val,index) in item.browList.slice(0,1)">
							<view class="top_text">
								<span style="font-family: PingFang-SC-Regular;">通过</span>
								<span>{{val.scoreUsername}}</span>
								<!-- <span>[最近使用]</span> -->
								<span>浏览了商品</span>
								<span style="color: burlywood;margin-left: 10rpx;">{{val.browGoods}}</span>
								
							</view>
							<view class="bottom_text">
								<span>最近访问:</span>
								<span >{{val.browCreatedTime}}</span>
								<span style="display: block;">(停留时长：{{val.browTime}} s）</span>
								
							</view>
						</view>
						<view class="" v-if="item.browList.length>1">
							...... 
						</view>
					</view>
				</view>
				<view class="phone">
					<view class="left" >
						<span @click="phonefn(item)">联系电话：{{item.phoneNum}}</span>
						<span style="margin-left: 16rpx;color: #cecece;" @click="copyphonenum(item.phoneNum)">复制</span>
					</view>
					<view class="right" @click="changecustomer(item)" v-if="item.cusDealOrNot==1">
						转成交
					</view>
				</view>
			</view>
			<view style="text-align: center;" class="" v-if="list.length==0">
				<image  src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/clear.png" mode="widthFix"></image>
			     <view class="" style="color: #a3a3a3;">
			     	暂无数据
			     </view>
			</view>
		</view>
		<view class="" style="padding-bottom: 50%;">
			
		</view>
		<uni-popup ref="popup" type="center"  >
					<view class="prop" style="width: 500rpx;border-radius: 10rpx;">
						<view class="title">是否将该客户转为已成交客户?</view>
						<view class="bottom">
							<view class="b_left" @click="closepop">
								取消
							</view>
							<view class="b_right" @click="btnOk">
								确定
							</view>
						</view>
					</view>
				</uni-popup>
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list:[
					
				],
				queryform:{
					referrerId:'',
					current: 1,
					pageSize: 5,
					cusDealOrNot:'1',//0已成交，1未成交
					phoneNum:''
				},
				total:0,
				tabnum:0,
				show:false,
				editform:{},
				allnum:{
					customerNum:0,
					followNum:0,
					noFollowNum:0,
					phoneCount:0,
					intentionNum:0,
					middleIntentionNum:0,
					lowIntentionNum:0,
					noneIntentionNum:0
					
				},
				numindex:0
			};
			
		},
		onLoad() {
		this.getlist()
		this.getalmun()
		},
			// 下拉
				onPullDownRefresh() {
					// 刷新位置
					this.getlist()
					this.getalmun()
						var that=this
						// uni.startPullDownRefresh({
						// 	success() {
								
						// 	},
						// 	fail(){
						// 		that.$refs.uToast.show({
						// 			type:'error',
						// 			title:'刷新失败'
						// 		})
						// 	}
						// })
						setTimeout(function(){
							uni.stopPullDownRefresh()
						},1000)
				},
				onReachBottom(){
					if(this.queryform.current*this.queryform.pageSize>=this.total){
						uni.showToast({
							title:'没有了',
							icon:'none'
						})
					}else{
						this.queryform.current++
						this.$request({
							url:'v3/customer/front/appCustomer/page',
							method:'GET',
							data:this.queryform
						}).then(res=>{
							this.list.push(...res.data.list)
						    this.total=res.data.pagination.total
							 
						})
					}
				},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods:{
			// 复制电话号码
			copyphonenum(value){
				 uni.setClipboardData({
				        data: String(value), // 字符串
				        success: () => {
					    uni.showToast({
				                icon: 'none',
					        title: '内容已复制'
					    });
				        },
					fail(){
					    // console.log("55", value);
				        }
				    });
			},
			chnagetab(val){
				this.tabnum=val
				this.queryform={
					referrerId:'',
					current: 1,
					pageSize: 5,
					cusDealOrNot:'1',//0已成交，1未成交
				}
				if(val==0){
					this.queryform.cusDealOrNot='1'
					this.getlist()
				}else{
					this.queryform.cusDealOrNot='0'
					this.getlist()
				}
			},
			// 电话号码
			search(){
				console.log(this.queryform.phoneNum);
				 this.getlist()
			},
			// 拨号
			phonefn(val){
				uni.makePhoneCall({
					phoneNumber:val.phoneNum
				})
			},
			// 筛选客户
			getlisted(val){
				this.numindex=val
				if(val==0){
					// 全部客户
					this.getlist()
				}else if(val==1){
					// 根进中
					 this.queryform.followStage='1'
					 this.getlist()
				}else if(val==2){
					// 未跟进
					this.queryform.followStage='0'
					 this.getlist()
				}else if(val==3){
					// 有号码
					this.queryform.customerPhone=0
					 this.getlist()
				}
				else if(val==4){
					this.queryform.customerIntention=0
					this.getlist()
				}
				else if(val==5){
					this.queryform.customerIntention=1
					this.getlist()
				}
				else if(val==6){
					this.queryform.customerIntention=2
					this.getlist()
				}
				else if(val==7){
					this.queryform.customerIntention=3
					this.getlist()
				}
			},
			// 获取客户数据
			getlist(){
				// console.log(this.userInfo,this.userCenterData,this.hasLogin);
				this.queryform.referrerId=this.userCenterData.memberId
				this.$request({
					url:'v3/customer/front/appCustomer/page',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.queryform.referrerId=''
					this.queryform.phoneNum=''
					this.queryform.followStage=''
					this.queryform.customerPhone=''
					 this.queryform.customerIntention=''
					// this.queryform={
					// 	referrerId:'',
					// 	current: 1,
					// 	pageSize: 5,
					// 	cusDealOrNot:'1',//0已成交，1未成交
					// 	phoneNum:''
					// }
					this.list=res.data.list,
					this.total=res.data.pagination.total
				})
			},
			// 获取统计数据
			getalmun(){
			this.$request({
				url:'v3/customer/front/appCustomer/count/'+this.userCenterData.memberId,
				method:'GET'
			}).then(res=>{
				this.allnum=res.data
			})	
			},
			// 客户详情
			tocustomerinfo(val){
				uni.navigateTo({
					url:"/standard/customerinfo/customerinfo?id="+val.id
				})
			},
			addcustomer(val){
				uni.navigateTo({
					url:"/standard/addcustomer/addcustomer?id="+val.id
				})
			},
			changecustomer(val){
				val.updateTime=null,
				val.createTime=null,
				
			this.$refs.popup.open()
				this.editform=val
				// this.$u.api.customer.editcustomerapi(val).then(res=>{
				// 	console.log(res);
				// })
			},
			// 修改客户
			btnOk(){
				this.editform.cusDealOrNot='0'
				this.$request({
					url:"v3/customer/front/appCustomer",
					method:"PUT",
					header:{
					  'Content-Type': 'application/json'
					},
					data:this.editform
				}).then(res=>{
					if(res){
						this.$refs.popup.close()
						this.getlist()
						this.getalmun()
					}
				})
			},
			 
			// 关闭弹框
			closepop(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
.warp{
	background-color: #f7f7f7;
	color: #282828;
	font-family: PingFang-SC-Regular;
	.c_title{
		width: 100%;
		height: 114rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0rpx 0rpx 15rpx #ebebeb;
		.active{
			color: #ee212d;
			font:36rpx PingFang-SC-Bold
		}
		.c_active{
			font:30rpx PingFang-SC-Medium
		}
	}
	.statistics{
		margin-top: 10rpx;
		height: 114rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0rpx 0rpx 15rpx #ebebeb;
		// display: flex;
		// justify-content: space-between;
		// margin-top: 10rpx;
		.item_t{
			width:180rpx !important;
			display: inline-block;
			display: flex;
			margin-left: 30rpx;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.item_top{
				font: 36rpx PingFang-SC-Bold;
				color: #ee212d;
			}
			.item_bottom{
				font: 26rpx PingFang-SC-Regular;
			}
		}
	}
	.tabs{
		width: 100%;
		height: 86rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		.tab_item{
			display: flex;
			height: 28rpx;
			line-height: 28rpx;
			justify-content: space-around;
			align-items: center;
			.name{
				font: 28rpx PingFang-SC-Medium;
			}
			.sanjiao{
				margin-left: 10rpx;
				.top{
					width: 0rpx;
					height: 0rpx;
					border-left: 16rpx solid transparent;
					border-right: 16rpx solid transparent;
					// border-top: 12rpx solid transparent;
					border-bottom: 10rpx solid #c3c3c3;
					margin-bottom: 4rpx;
					
				}
				.bottom{
					width: 0rpx;
					height: 0rpx;
					border-left: 16rpx solid transparent;
					border-right: 16rpx solid transparent;
					border-top: 10rpx solid #c3c3c3;
					// border-bottom: 12rpx solid transparent;
				}
			}
		}
	}
	.customer_list{
		padding: 0 30rpx;
		margin-top: 20rpx ;
	
		.customer_item{
			background-color: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
			.item_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #eeeeee;
				.i_left{
					display: flex;
					.i_text{
						margin-left: 10rpx;
						font-size: 24rpx PingFang-SC-Medium;
					}
					
				}
				.i_right{
						color: #656565;
					}
			}
			.item_card{
				margin-top: 36rpx;
				
				
				.c_top{
					display: flex;
				padding: 10rpx;
					.c_t_right{
						margin-left: 20rpx;
						.top{
							display: flex;
							justify-content: space-between;
								width: 520rpx;
							.top_left{
								display: flex;
								
								.name{
									margin-right: 20rpx;
									font: 28rpx PingFang-SC-Medium;
								}
								.statusover{
									width: 92rpx;
									height: 36rpx;
									border: 2rpx solid #cecece;
									border-radius: 10rpx;
									text-align: center;
									line-height: 36rpx;
									font: 24rpx PingFang-SC-Regular;
									color: #cecece;
								}
								.status{
									width: 92rpx;
									height: 36rpx;
									border: 2rpx solid #fe4a55;
									border-radius: 10rpx;
									text-align: center;
									line-height: 36rpx;
									font: 24rpx PingFang-SC-Regular;
									color: #fd4852;
								}
								
							}
							.top_right{
								font-size: 26rpx;
								width: 144rpx;
								height: 44rpx;
								background-color: #fe4a55;
								color: #ffffff;
								text-align: center;
								line-height: 44rpx;
								border-radius: 22rpx;
							}
						}
						.source,.adress,.num{
							font: 24rpx PingFang-SC-Regular;
							margin-top: 20rpx;
						}
					}
				}
				.c_bottom{
					display: flex;
					margin-top: 60rpx;
					padding-bottom: 30rpx;
						
					.b_left,.b_right{
						background-color: #fd4953; 
						padding: 10rpx 25rpx;
						border-radius: 10rpx;
						color: #ffffff;
					}
					.b_left{
						margin-right: 30rpx;
					}
				}
				
			}
		}
		.item_records{
			.record_list{
				.list_item{
					font: 24rpx PingFang-SC-Regular;
					padding: 30rpx 0;
					border-top: 2rpx solid #eeeeee;
					// border-bottom: 2rpx solid #eeeeee;
					.top_text{
						font: 24rpx PingFang-SC-Medium;
					}
					.bottom_text{
						color: #656565;
					}
				}
			}
		}
		.phone{
			padding-top: 30rpx;
			border-top: 2rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			font: 24rpx PingFang-SC-Medium;
			color: #ee212d;
		}
	}
	.prop{
		background-color: #fff;
		.title{
			font-size: 30rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}
		.bottom{
			display: flex;
			.b_right,.b_left{
				width: 50%;
				padding: 15rpx;
				border-top:  2rpx solid #cecece;
				text-align: center;
			}
			.b_right{
				border-left: 2rpx solid #cecece;
			}
		}
	}
}
</style>
